<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core">

<h:form id="add_dialog_form">
    <p:dialog id="add_dialog" widgetVar="add_dialog" modal="true" closable="true">
        <h:panelGrid id="add_grid" columns="2">
            <h:panelGrid id="name_grid">
                <p:outputLabel id="name_label" for="name_input" value="Name"/>
                <p:inputText id="name_input" value="#{addProductBean.name}" required="true" />
                <h:message for="name_input"/>
            </h:panelGrid>
            <h:panelGrid id="description_grid">
                <p:outputLabel id="description_label" for="description_input"  value="description"/>
                <p:inputText id="description_input" value="#{addProductBean.description}" required="true"/>
                <h:message for="description_input"/>
            </h:panelGrid>
        </h:panelGrid>

        <p:outputLabel value="Contains products" />
        <p:dataTable id="avalible_product_table" var="product" value="#{addProductBean.avalibleProducts}" widgetVar="avalible_product_table"
                     emptyMessage="No products found with given criteria" filteredValue="#{addProductBean.filteredProductList}"
                     paginator="true" rows="3"
                     paginatorTemplate="{CurrentPageReport} {PageLinks} {RowsPerPageDropdown}"
                     paginatorPosition="bottom"
                     rowsPerPageTemplate="3,5,10">

            <p:column id="productIDColumn" filterBy="#{product.productID}"
                      headerText="Product ID" filterMatchMode="contains">
                <h:outputText value="#{product.productID}" />
            </p:column>

            <p:column id="nameColumn" filterBy="#{product.name}"
                      headerText="Name" filterMatchMode="contains">
                <h:outputText value="#{product.name}" />
            </p:column>

            <p:column id="qualityRatingColumn" filterBy="#{product.qualityRating}"
                      headerText="Quality Rating" filterMatchMode="endsWith">
                <h:outputText value="#{product.qualityRating}"/>
            </p:column>

            <p:column id="addButtonColumn" headerText="">
                <p:commandButton value="add" actionListener="#{addProductBean.addProduct(product)}" immediate="true"/>
            </p:column>
        </p:dataTable>

        <p:outputLabel value="Added products" />
        <p:dataTable id="added_product_table" var="product" value="#{addProductBean.addedProducts}" widgetVar="added_product_table"
                     emptyMessage="No products found with given criteria"
                     paginator="true" rows="3"
                     paginatorTemplate="{CurrentPageReport} {PageLinks} {RowsPerPageDropdown}"
                     paginatorPosition="bottom"
                     rowsPerPageTemplate="3,5,10">

            <p:column id="addedProductIDColumn"
                      headerText="Product ID" >
                <h:outputText value="#{product.productID}" />
            </p:column>

            <p:column id="addedNameColumn"
                      headerText="Name" >
                <h:outputText value="#{product.name}" />
            </p:column>

            <p:column id="addedQualityRatingColumn"
                      headerText="Quality Rating" >
                <h:outputText value="#{product.qualityRating}"/>
            </p:column>

            <p:column id="buttonColumn" headerText="">
                <p:commandButton value="remove" actionListener="#{addProductBean.removeProduct(product)}" immediate="true"/>
            </p:column>
        </p:dataTable>
        <p:commandButton id="save" value="Save" actionListener="#{addProductBean.save}" update="add_dialog_form:add_grid" ajax="true"/>
    </p:dialog>
</h:form>
</html>